import React, { useState } from 'react'
import {useDispatch, useSelector} from 'react-redux'
import { incrementAction, decrementAction, incrementAsyncAction } from '../../redux/counter'

/* 
1. 读取redux管理的count状态数据
2. 通知redux更新它管理的count状态数据
*/
export default function CounterUpdate() {

  console.log('CounterUpdate')
  
  const [num, setNum] = useState(1)
  // 通过useSelector读取状态数据
  const count = useSelector(state => state.count)
  // 得到分发action的dispatch函数
  const dispatch = useDispatch()
  // 增加
  const increment = () => {
    // 分发action, 更新redux管理的count状态: 增加num
    // 只有num应该在组件中指定, 其它的type / payload / INCREMENT不用组件指定
    // redux需要提供创建action的函数
    dispatch(incrementAction(num)) // dispatch默认要求必须接收一个action对象

    // dispatch(action对象)
    // dispatch(action函数)
  }
  // 减少
  const decrement = () => {
    // 更新redux管理的count状态: 减少num
    dispatch(decrementAction(num))
  }
  // 奇数增加
  const incrementIfOdd = () => {
    if (count%2===1) {
      dispatch(incrementAction(num))
    }
  }
  // 延迟增加
  const incrementAsync = () => {
    // 让redux异步更新
    dispatch(incrementAsyncAction(num))
  }

  return (
    <div>
      <select value={num} onChange={e => setNum(e.target.value * 1)}>  {/* *1保证num是数值 */}
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
      <button onClick={incrementIfOdd}>奇数增加</button>
      <button onClick={incrementAsync}>延迟1S增加</button>
    </div>
  )
}
